<!--  -->
<template>
  <div class="e-map animate__animated animate__fadeInLeft">
    <div v-if="!loadingFlag" id="lygMap"></div>
    <div v-if="!loadingFlag" class="map-tool">
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          {{
            this.$store.getters.getAreaList[
              this.$store.getters.getListAreaIndex
            ]["area_name"] || "连云港市"
          }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, i) in this.$store.getters.getAreaList"
            :key="i"
            :command="item.area_code"
            >{{ item.area_name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div v-if="loadingFlag" class="e-loading">
      <dv-loading style="color: #fff">地图数据加载中...</dv-loading>
    </div>
  </div>
</template>

<script>
// import publicEcharts from "../charts/PublicEcharts";
import { getDetailMap } from "../../assets/json/lygjson2";
import { getPoint } from "../../assets/json/data";
import chartConfig from "../../utils/chartOption/chartConfig";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    // publicEcharts,
  },
  data() {
    //这里存放数据
    return {
      lygjson: {},
      pointData: [],
      // mapStr: "全市",
      // areaList:
      isTooltip: false,
      geoData: {},
      loadingFlag: false,
    };
  },
  //监听属性 类似于data概念
  computed: {
    areaCode() {
      return this.$store.state.listAreaIndex;
    },
  },
  //监控data中的数据变化
  watch: {
    // areaCode(newVal, oldVal) {
    //   console.log("区域code有改动 -- eMap");
    //   this.init();
    // },
  },
  //方法集合
  methods: {
    getLygJson() {
      return getDetailMap();
    },
    getMyPoint() {
      return getPoint();
    },
    charet(arr) {
      // console.log('e map');
      this.$echarts.init(document.getElementById("lygMap")).dispose();
      let mapChart = this.$echarts.init(document.getElementById("lygMap"));

      this.$echarts.registerMap("lygJson", this.lygjson);

      var option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            // return params.name + " </br> " + params.value[2];
            // console.log(params);
            // data1 = params.data
            let val = params.data ? params.data.use_num : "---";
            let units = params.data ? params.data.com_num : "---";
            return (
              "<div class='tooltip-map'>" +
              "<p>" +
              params.name +
              "</p>" +
              "<p>" +
              val +
              " </p> " +
              "<p>" +
              units +
              "</p>" +
              "</div>"
            );
            // return params.data
          },
        },
        // visualMap: {
        //   min: 1000,
        //   max: 7000,
        //   text: ["多", "少"],
        //   realtime: true,
        //   calculable: true,
        //   inRange: {
        //     color: ["lightskyblue", "yellow", "orangered"],
        //   },
        //   textStyle: {
        //     show: true,
        //     color: chartConfig.c_map_bg,
        //     textBorderColor: chartConfig.c_map_bg,
        //     textBorderWidth: 0.5,
        //     fontSize: 16,
        //     fontWeight: 400,
        //   },
        //   top: 'middle'
        // },
        series: [
          {
            name: "",
            type: "map",
            mapType: "lygJson", // 自定义扩展图表类型
            label: {
              show: true,
            },
            data: arr,
            // 自定义名称映射
            nameMap: {
              gnx: "灌南县",
              gyx: "灌云县",
              hzq: "海州区",
              dhx: "东海县",
              lyq: "连云区",
              gyq: "赣榆区",
            },
            label: {
              normal: {
                show: true,
                color: chartConfig.c_map_font_color,
                textBorderColor: chartConfig.c_map_bg,
                textBorderWidth: 1,
                fontSize: 18,
                fontWeight: 700,
              },
              emphasis: {
                textStyle: {
                  show: true,
                  color: chartConfig.c_map_bg,
                  textBorderColor: chartConfig.c_map_bg,
                  textBorderWidth: 0.5,
                  fontSize: 18,
                  fontWeight: 700,
                },
              },
            },
            itemStyle: {
              normal: {
                color: chartConfig.c_map_bg, //地图背景色
                borderColor: chartConfig.c_map_font_color, //省市边界线00fcff 516a89
                borderWidth: 1,
                // shadowColor: 'rgba(0, 0, 0, 0.3)',
                // shadowBlur: 10,
                // shadowOffsetX: 0,
                // shadowOffsetY: 0,
              },
            },
            emphasis: {
              itemStyle: {
                areaColor: chartConfig.c_emphasis_color, //悬浮背景
              },
            },
            roam: true,
            top: 0,
            // left:0,
            // right:0,
            bottom: 0,
          },
        ],
      };
      // option end
      mapChart.setOption(option);
      var that = this;
      mapChart.on("click", function (params) {
        console.log("----------------- 地区点击事件 start -----------------");
        // console.log(params); //此处写点击事件内容
        if (!params.data) return;
        arr.forEach(item => {
          if (item.name == params.data.name) {
            console.log(item.itemStyle)
          }
        });

        that.handleCommand(params.data.area_code);
        console.log("----------------- 地区点击事件 end -----------------");
      });
    },
    // 地图下拉处理
    handleCommand(e) {
      console.log("handleCommand --- " + e);
      // console.log(typeof e);
      // this.$store.commit("setListAreaIndex", 0);
      let mapType = this.$store.getters.getMapType;
      switch (e) {
        case 320700000000:
          this.$store.commit("setListAreaIndex", 0);
          mapType = "lyg";
          break;
        case 320703000000:
          this.$store.commit("setListAreaIndex", 1);
          mapType = "lyq";
          break;
        case 320706000000:
          this.$store.commit("setListAreaIndex", 2);
          mapType = "hzq";
          break;
        case 320707000000:
          this.$store.commit("setListAreaIndex", 3);
          mapType = "gyq";
          break;
        case 320722000000:
          this.$store.commit("setListAreaIndex", 4);
          mapType = "dhx";
          break;
        case 320723000000:
          this.$store.commit("setListAreaIndex", 5);
          mapType = "gyx";
          break;
        case 320724000000:
          this.$store.commit("setListAreaIndex", 6);
          mapType = "gnx";
          break;
        default:
          return console.log("我丢...");
      }
      this.$store.commit("setMapType", mapType);
      this.lygjson = this.getLygJson()[this.$store.getters.getMapType];
      // console.log(this.lygjson);
      // this.charet();
      // this.$emit("get-center", [119.474725, 34.367653]);
    },

    async init() {
      // this.handleCommand(e)

      this.loadingFlag = true;

      let index = this.$store.state.listAreaIndex;
      let mapTown;

      let area_code = this.$store.getters.getAreaList[
        this.$store.getters.getListAreaIndex
      ]["area_code"];
      let params = { area_code };

      if (index != 0) {
        console.log("乡镇");
        mapTown = await this.$http.postGetMiddleMapTown(params);
      } else {
        console.log("县区");
        mapTown = await this.$http.postGetMiddleMapBorough(params);
      }

      let ret = mapTown.data;
      if (ret.errorCode != 0) {
        console.log("后台运行异常!");
        return console.log(ret);
      }

      // console.log(ret);

      this.loadingFlag = false;
      this.$nextTick(() => {
        this.charet(ret.data);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log(getDetailMap());
    this.lygjson = this.getLygJson()[this.$store.getters.getMapType];
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.init();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.e-map {
  width: 100%;
  height: 100%;
  position: relative;
  #lygMap {
    width: 100%;
    height: 100%;
  }
  .map-tool {
    position: absolute;
    right: 1%;
    top: 2%;
  }
  .show-map-detail.tooltip-map {
    background-color: rgba(2, 15, 71, 0.7);
    border-radius: 0.05rem;
    position: absolute;
    left: 0;
    top: 0;
    // transform: translate(-50%, -50%);
  }
}
</style>